<template>
  <div class="channel-edit">
    <!-- 当前登录用户的订阅频道 -->
    <div class="channel">
      <van-cell class="chan-head-nav" title="我的频道" :border="false">
        <van-button
          class="edit-btn"
          @click="editBtn"
          plain
          hairline
          size="mini"
          type="danger"
        >
          {{ isChange ? "完成" : editing ? "取消" : "编辑" }}
        </van-button>
      </van-cell>
      <van-grid>
        <van-grid-item
          v-for="(item, index) in channelList"
          :key="item.id"
          :class="{ cur: index === activeIndex }"
          @click="hClickMyChannel(item)"
        >
          <span>{{ item.name }}</span>
          <van-icon v-show="editing" name="cross" class="btn"></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 当前登录用户的没有订阅频道 -->
    <div class="channel">
      <van-cell class="chan-head-nav" title="可选频道" :border="false" />
      <van-grid>
        <van-grid-item
          v-for="(item, index) in cRecommendChannels"
          :key="index"
          @click="hAddChannel(item)"
        >
          <span>{{ item.name }}</span>
          <van-icon name="plus" class="btn"></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>
<script>
import { getAllChannels, addChannel, deleteChannel } from "@/api/channel";
export default {
  name: "ChannelEdit",
  data() {
    return {
      editing: false,
      allChannels: [],
      isChange: false
    };
  },
  props: {
    channelList: {
      type: Array
    },
    activeIndex: {
      type: Number
    }
  },
  computed: {
    cRecommendChannels() {
      /**
       * allChannels(所有) - channelList(当前) Array
       */
      const arr = this.allChannels.filter(channels => {
        // item=>item.id === channels.id idx>0 代表有这个id我们就不要了
        const idx = this.channelList.findIndex(item => item.id === channels.id);
        return idx < 0;
      });
      return arr;
    }
  },
  created() {
    this.loadAllChannels();
  },
  methods: {
    //
    async hClickMyChannel(obj) {
      // 在编辑状态可以删除
      if (this.editing) {
        this.isChange = true;
        if (obj.id === 0) {
          // id === 0 不删除这个频道
          return;
        }
        //console.log('1')
        // 接口的简单

        try {
          await deleteChannel(obj.id);
          // 视觉上大的删除 假删除 先做他
          const idx = this.channelList.findIndex(item => item.id === obj.id);
          if (idx !== -1) {
            this.channelList.splice(idx, 1);
            this.$toast.success("删除成功");
            if (idx < this.activeIndex) {
              this.$emit("updateCurIndex", this.activeIndex - 1);
            }
          }
        } catch {
          //console.log('服务器有问题')
          this.$toast.fail("服务器有问题");
        }
      } else {
        // 在不编辑状态下收起弹窗
        this.$emit("close");
        // 跳转到当前的频道中去
        this.$emit("updateCurChannel", obj);
      }
    },
    // hAddChannel
    async hAddChannel(obj) {
      this.isChange = true;
      this.editing = true;
      // 要传给后端的数据
      let curChannelsNow = [...this.channelList, obj];
      curChannelsNow.splice(0, 1);
      // {id:xxx，name：xxx} {id:xxx,seq/:...}
      curChannelsNow = curChannelsNow.map((item, idx) => {
        return {
          id: item.id,
          seq: idx
        };
      });
      await addChannel(curChannelsNow);
      // 有好有坏 好处我们不需要在把改变的数据传过去了
      // 坏处 子影响了父级
      // 如何避免 channelList 在使用前转成字符串 JSON > String
      this.channelList.push(obj);
    },
    async loadAllChannels() {
      const res = await getAllChannels();
      this.allChannels = res.data.data.channels;
    },
    editBtn() {
      if (this.isChange) {
        // 在不编辑状态下收起弹窗
        this.$emit("close");
      } else {
        this.editing = !this.editing;
      }
    }
  }
};
</script>
<style lang="less">
.channel-edit {
  .cur {
    color: red;
    font-weight: bold;
  }
  .channel {
    padding: 15px;
    font-size: 14px;
  }
  .chan-head-nav {
    padding: 15px 0;
  }
  .edit-btn {
    padding: 0 20px;
  }
  .btn {
    position: absolute;
    bottom: -1px;
    right: -1px;
    font-size: 14px;
    border: 1px solid #ebedf0;
    background: #ebedf0;
    color: #323233;
  }
}
</style>
